<template>
  <div class="quill-wrap">
    <quill-editor
      ref="myQuillEditor"
      :value="value"
      :options="editorOption"
      @blur="onEditorBlur($event)"
    />
  </div>
</template>

<script>
import 'quill/dist/quill.snow.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
  components: { quillEditor },
  props: ['value'],
  data() {
    return {
      content: '',
      editorOption: {
        // 富文本框参数设置
        modules: {
          ImageExtend: {
            loading: true,
            name: 'img',
            action: 'http://127.0.0.1:7001/yun/upload',
            response: (res) => {
              return `http://127.0.0.1:7001/public/uploadfile/${res.data.filename}`
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }
    }
  },
  methods: {
    onEditorBlur(v) {
      this.$emit('input', v.editor.delta.ops[0].insert)
    }
  }
}
</script>

<style></style>
